<template>
  <el-dialog
    title="香港本地网"
    :visible.sync="visible"
    width="85%"
    lock-scroll
    :before-close="handleClose"
    append-to-body
  >
    <el-dialog
      title="添加方案"
      :visible.sync="innerVisible"
      width="85%"
      lock-scroll
      append-to-body
    >
      <el-form :model="formData" ref="formData" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="通达方式:">
              <el-select
                v-model="formData.industryTypeCode"
                placeholder="请选择"
                class="m-select"
              >
                <el-option
                  v-for="item in optionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出境ITMC:">
              <el-select
                v-model="formData.industryTypeCode"
                placeholder="请选择"
                class="m-select"
              >
                <el-option
                  v-for="item in optionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="海外登陆POP点:">
              <el-select
                v-model="formData.industryTypeCode"
                placeholder="请选择"
                class="m-select"
              >
                <el-option
                  v-for="item in optionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="海外公司自编号:" required>
              <el-input
                placeholder="请输入内容"
                v-model="formData.industryTypeCode"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="境内接口ITMC:" required>
              <el-input
                placeholder="请输入内容"
                v-model="formData.industryTypeCode"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电路维护等级是否具备:">
              <el-select
                v-model="formData.industryTypeCode"
                placeholder="请选择"
                class="m-select"
              >
                <el-option
                  v-for="item in optionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电路维护等级:">
              <el-select
                v-model="formData.industryTypeCode"
                placeholder="请选择"
                class="m-select"
              >
                <el-option
                  v-for="item in optionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="维护等级描述:" required>
              <el-input
                placeholder="请输入内容"
                v-model="formData.industryTypeCode"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="有效期:" class="u-ipt" required>
              <el-date-picker
                v-model="formData.industryTypeCode"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
                >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="错单标识:">
              <el-select
                v-model="formData.industryTypeCode"
                placeholder="请选择"
                class="m-select"
              >
                <el-option
                  v-for="item in optionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <p>境外国际段/海外公司自有</p>
    </el-dialog>
    <div>
      <el-col class="btnClass">
        <el-button type="primary" @click="confirmBtn">提交</el-button>
        <el-button type="primary" @click="innerVisible = true"
          >添加方案</el-button
        >
        <el-button type="primary" @click="confirmBtn">删除方案</el-button>
        <el-button type="primary" @click="confirmBtn">赋值方案</el-button>
        <el-button type="primary" @click="confirmBtn">上传附件</el-button>
        <el-button type="primary" @click="handleClose">关 闭</el-button>
      </el-col>
      <el-table
        ref="tableData"
        border
        :header-cell-style="{
          background: '#F2F2F2',
          color: '#333',
        }"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          label="方案类型"
          prop="contactName"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="通达方式"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="出入境ITMC"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="海外登陆POP点"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="海外公司自编号"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="电路维护等级是否具备"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="维护等级描述"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="有效期"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="错单标识"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @current-change="currentChange"
        :current-page="parseInt(tablePage.pageIndex)"
        :page-size="parseInt(tablePage.pageSize)"
        layout="total, prev, pager, next, jumper"
        :total="parseInt(tablePage.rowCount)"
        class="m-pagination"
      >
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      innerVisible: false, //耳机弹窗
      tableData: [],
      formData: {},
      tablePage: {
        pageIndex: 1,
        pageSize: 5,
        rowCount: 0,
      },
      optionList: [],
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    handleClose() {
      this.$emit("closeDialog");
    },
    confirmBtn() {},
    returnBtn() {},
    //改变当前页
    currentChange() {},
    //发送事件
    sendBtn() {},
    cancelBtn() {
      this.innerVisible = false;
    },
  },
};
</script>
<style lang='scss' scoped>
.radioBtn {
  padding-left: 0.2rem;
}
.m-pagination {
  margin-top: 10px;
  text-align: right;
}
.btnClass {
  text-align: right;
  margin-bottom: 10px;
}
.innerClass {
  text-align: center;
}
</style>